<template>
  <div class="merchant-details">
    <el-row v-loading="subLoading">
      <el-col :span="24">
        <el-table highlight-current-row :data="deviceList" :header-cell-style="{
        'background-color': '#f3f8fe',
        color: '#606266',
        height: '50px',
      }" style="width: 100%">
          <el-table-column align="center" prop="device_id" label="设备ID">
            <template slot-scope="scope">
              <el-tooltip
                placement="top-start"
                :content="scope.row.device_id"
              >
                <div class="one_line_hidden">
                  {{ scope.row.device_id ? scope.row.device_id : "-" }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="device_model" label="设备型号">
          </el-table-column>
          <el-table-column align="center" prop="device_name" label="设备名称">
          </el-table-column>
          <el-table-column align="center" prop="device_uuid" label="设备uuid">
            <template slot-scope="scope">
              <el-tooltip
                placement="top-start"
                :content="scope.row.device_uuid"
              >
                <div class="one_line_hidden">
                  {{ scope.row.device_uuid ? scope.row.device_uuid : "-" }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="login_time" label="最近一次">
            <template slot-scope="scope">
              <el-tooltip
                placement="top-start"
                :content="scope.row.login_time"
              >
                <div class="one_line_hidden">
                  {{ scope.row.login_time ? scope.row.login_time : "-" }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="login_count" label="登录次数">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col class="marginTop" style="text-align: right">
        <el-pagination @size-change="handledeviceSizeChange" @current-change="handledeviceCurrentChange"
          :current-page="deviceSearch.page" :page-sizes="[10, 20, 30, 40]" :page-size="deviceSearch.count"
          layout="total, sizes, prev, pager, next, jumper" :total="totaldevice">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {
    getdeviceList
    } from "@/api/user/index";
  export default {
    name: 'deviceLists',
    data() {
      return {
        subLoading:true,
        deviceList: [],
        userId:'',
        totaldevice: 0,
        deviceSearch: {
          user_id: "",
          page: 1,
          count: 10,
        },
      }
    },
    created() {},
    methods: {
      // 分页选择调用
      handledeviceCurrentChange(val) {
        this.deviceSearch.count = val;
        this.getdeviceListWays(this.userId);
      },
      // 分页选择调用
      handledeviceSizeChange(val) {
        this.deviceSearch.page = val;
        this.getdeviceListWays(this.userId);
      },
      getdeviceListWays(row) {
        this.userId = row
        var obj = this.deviceSearch;
        obj.user_id = row;
        this.subLoading = true;
        getdeviceList(obj)
          .then((res) => {
            this.subLoading = false;
            if (res.code !== 200) {
              this.$messages.error(res.msg);
              return;
            }
            this.deviceList = res.data.list;
            this.totaldevice = res.data.total;
          })
          .catch(() => {
            this.subLoading = false;
          });
      },
    }
  }
</script>
<style lang="scss">
  .container-module {
    padding: 20px 20px 10px 30px;
  }
</style>
